<template>
  <div class="customer_for_code">
    <div class="flex flex-horizontal-between">
      <div style="font-size: 16px; font-weight: 600; color: #f59a23; line-height: 32px">
        活动名—{{ activityName }}
      </div>
      <div>
        <Button
          type="primary"
          style="margin-right: 10px"
          @click="addExpandCode"
          v-if="unlocking('0107100100') && isActivity">
          新建拓客码
        </Button>
        <Button type="primary" @click="addPiont" v-if="unlocking('0107100100')">新建点位</Button>
        <Button
          type="primary"
          style="margin-left: 10px"
          @click="exportExcel"
          v-if="unlocking('0107100600') && !isActivity">
          导出excel
        </Button>
      </div>
    </div>
    <dt-grid ref="table" page :onFetch="onFetch" />
    <point-position ref="pointPosition" @success="onSuccess" />
    <download-modal ref="downloadModal" @success="onSuccess" />
    <point-detail ref="pointDetail" />
    <add-expand-code ref="addExpandCode" @success="onSuccess" />
    <task-in-user ref="taskInUser" />
  </div>
</template>

<script>
  import columnOpt from './opt/expandColumn.js'
  import pointMgr from '@/biz/customerForCode/point'
  import pointPosition from './component/pointPosition.vue'
  import downloadModal from './component/downloadModal.vue'
  import pointDetail from './component/pointDetail.vue'
  import addExpandCode from './component/addExpandCode.vue'
  import taskInUser from './component/taskInUser.vue'

  export default {
    components: {
      pointPosition,
      downloadModal,
      pointDetail,
      addExpandCode,
      taskInUser
    },
    data() {
      return {
        visitsNumSort: '',
        newCluesSort: '',
        visitCustomerSort: '',
        signCustomerSort: '',
        filterParams: null,
        isActivity: false,
        activityName: ''
      }
    },
    methods: {
      addPiont() {
        let data = {
          title: '新增点位',
          isEdit: false,
          isActivity: this.isActivity, //用来判断是通过  抽奖活动/码上获客(true/false) 进来的
          pointPositionName: '',
          tokerId: '',
          channelName: ''
        }
        this.$refs.pointPosition.show(data)
      },

      onFetch(data) {
        let params = {
          ...data,
          buildingId: this.$dt.buildInfo().housesId,
          activityId: this.$route.query.activityId
        }
        this.filterParams = params
        if (this.isActivity) {
          return pointMgr.basicsTokerList(params).then((res) => {
            res.list = res.records
            return res
          })
        } else {
          return pointMgr.tokerList(params).then((res) => {
            res.list = res.records
            return res
          })
        }
      },
      exportExcel() {
        pointMgr.tokerListExport(this.filterParams)
      },
      checkFun(data) {
        this.$refs.pointDetail.show(data)
      },
      //编辑点位
      editFun(obj) {
        let data = {
          title: '编辑点位',
          isEdit: true,
          isActivity: this.isActivity,
          ...obj
        }
        this.$refs.pointPosition.show(data)
      },
      //参与人数
      taskInfun(data) {
        if (data.joinUserNum == 0) return false
        this.$refs.taskInUser.show(data)
      },
      //新建、编辑拓客码
      addExpandCode(row) {
        let data = {
          title: row.id ? '编辑拓客码' : '新增拓客码',
          isEdit: row.id ? true : false,
          ...row
        }
        this.$refs.addExpandCode.show(data)
      },
      downloadFun(data) {
        let obj = {}
        if (this.isActivity) {
          obj = {
            ...data,
            pointPositionId: data.id,
            tokerId: data.tokerId,
            activityName: this.activityName
          }
        } else {
          obj = {
            activityName: this.activityName,
            tokerName: this.$route.query.activityName,
            channelName: data.channelName,
            pointPositionName: data.pointPositionName,
            pointPositionId: data.id
          }
        }
        this.$refs.downloadModal.show(obj)
      },
      delFun(data) {
        this.$Modal.confirm({
          title: '提示',
          content: `是否确认要删除？`,
          okText: '确认',
          closable: true,
          onOk: () => {
            let params = {
              id: data.id
            }
            pointMgr.delPoint(params).then((res) => {
              this.$refs.table.fetch(true)
              this.$Message.success('删除成功')
            })
          }
        })
      },
      onSuccess() {
        if (this.isActivity) {
          this.$refs.table.init(this, new columnOpt.activityColumn(this))
        } else {
          this.$refs.table.init(this, new columnOpt.Column(this))
        }
        this.$refs.table.fetch(true)
      }
    },
    mounted() {
      this.isActivity = this.$route.query.formPath == 'activity'
      this.activityName = this.$route.query.activityName
      if (this.isActivity) {
        this.$refs.table.init(this, new columnOpt.activityColumn(this))
      } else {
        this.$refs.table.init(this, new columnOpt.Column(this))
      }
      this.$refs.table.fetch()
    }
  }
</script>

<style lang="scss" scoped>
  .customer_for_code {
    padding: 20px;
  }
</style>
